<template>
  <div class="bigbox">
    <!-- 头像展示大盒子 -->
    <div class="header">
      <div class="headerimg"><img src="../assets/touxiang.jpg" alt="" /></div>
      <div class="namebox">疯狂的红兔子</div>
      <span class="root">超级管理员</span>
      <button class="btn" @click="ck('about')">退出登录</button>
      <span class="line"></span>
      <p class="p1">最近登录地点:成都</p>
      <p class="p2">登录时间:{{ $store.state.rootisinformation.roottime }}</p>
    </div>
    <!-- 卖出数据展示 -->
    <div class="lonbox">
      <el-table
        :data="$store.state.mobilePhoneShipmentVolume"
        style="width: 100%"
      >
        <el-table-column prop="name" label="手机"> </el-table-column>
        <el-table-column prop="day" label="今日购买"> </el-table-column>
        <el-table-column prop="month" label="本月购买"> </el-table-column>
        <el-table-column prop="total" label="总出货量"> </el-table-column>
      </el-table>
    </div>
    <div class="headerbox">
      <div class="box1">
        <div class="smabox1"><img src="../assets/圈勾(1).png" alt="" /></div>
        <div class="spword1">￥127</div>
        <div class="pword1">今日支付订单</div>
      </div>
      <div class="box1">
        <div class="smabox2">
          <img src="../assets/收藏(1).png" alt="" />
        </div>
        <div class="spword2">￥27</div>
        <div class="pword2">今日收藏订单</div>
      </div>
      <div class="box1">
        <div class="smabox3"><img src="../assets/锁定(1).png" alt="" /></div>
        <div class="spword3">￥76</div>
        <div class="pword3">今日未支付订单</div>
      </div>
      <div class="box1">
        <div class="smabox1"><img src="../assets/圈勾(1).png" alt="" /></div>
        <div class="spword4">￥2873</div>
        <div class="pword4">本月支付订单</div>
      </div>
      <div class="box1">
        <div class="smabox2">
          <img src="../assets/收藏(1).png" alt="" />
        </div>
        <div class="spword5">￥236</div>
        <div class="pword5">本月收藏订单</div>
      </div>
      <div class="box1">
        <div class="smabox3"><img src="../assets/锁定(1).png" alt="" /></div>
        <div class="spword6">￥365</div>
        <div class="pword6">本月未支付订单</div>
      </div>
    </div>
    <div class="bigmox">
      <!-- 折线图 -->
      <div id="linechart" style="width: 590 px; height: 280px"></div>
    </div>
    <div class="mojbox">
      <div id="barchart" style="width: 275px; height: 270px"></div>
    </div>
    <div class="mokbox">
      <div id="piechart" style="width: 300px; height: 240px"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    var mylinechart = echarts.init(document.getElementById("linechart"));
    var option = {
      title: {
        text: "近七天出货量",
        bottom: "10px",
        right: "43%",
        subtextStyle: {
          transform: `translateX(-50 %)`,
        },
      },
      tooltip: {},
      legend: {
        data: this.$store.state.mobilePhoneManufacturer,
      },
      xAxis: {
        data: this.$store.state.lastSevenDays,
      },
      yAxis: {},
      series: [
        {
          name: "小米",
          type: "line",
          data: this.$store.state.mylineChart_data.mi,
          stack: "x",
        },
        {
          name: "oppo",
          type: "line",
          data: this.$store.state.mylineChart_data.oppo,
          stack: "x",
        },
        {
          name: "华为",
          type: "line",
          data: this.$store.state.mylineChart_data.huawei,
          stack: "x",
        },
        {
          name: "vivo",
          type: "line",
          data: this.$store.state.mylineChart_data.vivo,
          stack: "x",
        },
        {
          name: "iphone",
          type: "line",
          data: this.$store.state.mylineChart_data.iphone,
          stack: "x",
        },
        {
          name: "魅族",
          type: "line",
          data: this.$store.state.mylineChart_data.sansong,
          stack: "x",
        },
      ],
    };
    mylinechart.setOption(option);

    //柱状图
    var mybarchart = echarts.init(document.getElementById("barchart"));
    var option_bar = {
      legend: {},
      data: ["新增用户", "活跃用户"],
      xAxis: {
        // data: ['3-1', '3-2', '3-3', '3-4', '3-5', '3-6', '3-7']
        type: "category",
      },
      yAxis: {},
      dataset: {
        // 提供一份数据。
        source: [
          ["product", "新增用户", "活跃用户"],
          ["3-1", 43.3, 85.8],
          ["3-2", 83.1, 73.4],
          ["3-3", 86.4, 65.2],
          ["3-4", 72.4, 53.9],
          ["3-5", 72.4, 53.9],
          ["3-6", 72.4, 53.9],
          ["3-7", 72.4, 53.9],
        ],
      },
      series: [{ type: "bar" }, { type: "bar" }],
    };
    mybarchart.setOption(option_bar);

    //饼状图
    var mypiechart = echarts.init(document.getElementById("piechart"));
    var option_pie = {
      legend: {
        orient: "vertical",
        x: "left",
        data: this.$store.state.mobilePhoneManufacturer,
      },
      title: {
        left: "center",
        top: "bottom",
        text: "最近一月销售占额",
        textStyle: {
          fontSize: 15,
        },
      },
      series: [
        {
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          labelLine: {
            show: false,
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "30",
              fontWeight: "bold",
            },
          },
          data: this.$store.state.salesProportionInThePastMonth,
        },
      ],
    };
    mypiechart.setOption(option_pie);

    //响应式大小
    window.addEventListener("resize", function () {
      mylinechart.resize();
      mybarchart.resize();
      mypiechart.resize();
    });
  },
  methods: {
    ck(about1) {
      localStorage.removeItem("vuex");
      this.$router.push({ name: about1 }); //跳转到登录页面
      alert("退出成功，欢迎下次登录");
    },
  },
};
</script>

<style lang="less" scoped>
.bigbox {
  position: relative;
  height: 750px;
  top: 40px;
  // outline: 1px solid green;
}
.header {
  position: absolute;
  width: 330px;
  height: 300px;
  border-radius: 10px 10px;
  background-color: rgba(216, 212, 212, 0.798);
}
.headerimg {
  position: absolute;
  width: 120px;
  height: 120px;
  top: 30px;
  left: 30px;
  border-radius: 50% 50%;
  overflow: hidden;
}
.headerimg img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
}
.namebox {
  position: absolute;
  width: 150px;
  height: 50px;
  left: 180px;
  top: 40px;
  font-size: 20px;
  font-weight: 800;
}
.root {
  position: absolute;
  width: 150px;
  height: 40px;
  top: 85px;
  left: 180px;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.62);
}
.btn {
  position: absolute;
  width: 100px;
  height: 40px;
  border-radius: 10px 10px;
  top: 120px;
  left: 180px;
}
.line {
  position: absolute;
  width: 300px;
  height: 2px;
  left: 10px;
  top: 180px;
  background-color: rgba(0, 0, 0, 0.223);
}
.p1,
.p2 {
  position: absolute;
  top: 210px;
  left: 60px;
  color: rgba(0, 0, 0, 0.62);
}
.p2 {
  top: 250px;
}
.lonbox {
  position: absolute;
  top: 330px;
  width: 330px;
  height: 450px;
  border-radius: 10px 10px;
  background-color: rgba(216, 212, 212, 0.798);
}
.el-table {
  position: absolute;
  height: 450px;
  line-height: 50px;
}
.headerbox {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;
  width: 600px;
  height: 180px;
  left: 360px;
  border-radius: 10px 10px;
  line-height: 95px;
  background-color: rgba(237, 241, 241, 0.856);
}
.box1 {
  display: flex;
  justify-content: space-between;
  width: 185px;
  height: 75px;
  border-radius: 5px 5px;
  background-color: white;
  // outline: 1px solid palevioletred;
}
.smabox1,
.smabox2,
.smabox3 {
  position: relative;
  width: 70px;
  height: 75px;
  // outline: 1px solid red;
}
.smabox1 {
  background-color: rgba(127, 247, 201, 0.836);
}
.smabox1 img {
  margin-left: 15px;
  width: 50%;
  height: 50%;
}
.smabox2 {
  background-color: rgba(245, 199, 73, 0.723);
}
.smabox2 img {
  margin-left: 15px;
  width: 60%;
  height: 60%;
}
.smabox3 {
  background-color: rgba(97, 233, 240, 0.702);
}
.smabox3 img {
  margin-left: 15px;
  width: 50%;
  height: 50%;
}
.spword1,
.spword4 {
  position: absolute;
  left: 73px;
  font-size: 30px;
  font-weight: 700;
}
.spword2,
.spword5 {
  position: absolute;
  left: 290px;
  font-size: 30px;
  font-weight: 700;
}
.spword3,
.spword6 {
  position: absolute;
  left: 495px;
  font-size: 30px;
  font-weight: 700;
}
.spword1,
.spword2,
.spword3 {
  top: -30px;
}
.spword4,
.spword5,
.spword6 {
  top: 80px;
}

.pword1,
.pword4 {
  position: absolute;
  left: 78px;
}
.pword2,
.pword5 {
  position: absolute;
  left: 290px;
}
.pword3,
.pword6 {
  position: absolute;
  left: 488px;
  font-size: 15px;
}
.bigmox {
  position: absolute;
  width: 550px;
  height: 270px;
  left: 380px;
  top: 200px;
  border-radius: 10px 10px;
  background-color: white;
}
.mojbox {
  position: absolute;
  width: 260px;
  height: 280px;
  left: 380px;
  top: 490px;
  border-radius: 10px 10px;
  background-color: white;
}
.mokbox {
  position: absolute;
  width: 260px;
  height: 280px;
  left: 670px;
  top: 490px;
  border-radius: 10px 10px;
  background-color: white;
}
</style>